<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" href="../js/layui-v2.5.6/layui/css/layui.css">
</head>
<body class="layui-container layui-row">
<!-- 导航栏 -->
<div class="layui-nav-title" style="text-align: center; font-size: xx-large;color: red;">
    this will be a nav
</div>

<div class="layui-col-md8" style="width: 100%;">
    <!-- 标题 -->
    <div class="layui-col-md8 layui-nav-title" style="text-align: center; margin-top: 5px;">
        <span id = "news_title" style="color: red; "></span>
    </div>
    <div class="layui-col-md8"
         style="text-align: left; font-size: small; color: gray; margin-top: 10px; margin-bottom: 10px;">
        作者：<span id ="author"></span>
    </div>
    <!-- 内容 -->
    <div class="layui-col-md8" id="contentText">
        ceshi
    </div>
</div>
</body>

<script src="../js/layui-v2.5.6/layui/layui.all.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '70%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
    var $ = layui.jquery ;
    $(function () {
        console.log("document is ready ");
        $.get('http://120.27.243.49:7301/mock/5da0991bf59b9f0e89ff3379/example/mock/data', function (data, status) {
            console.log(data,status);
            if (status === "success" ){
                console.log(data.data);
                $("#news_title").html(data.data.title);
                $("#contentText").html(data.data.content);
                $("#author").html(data.data.author);
            }
        }, 'json');
    })

    function imgClick(e) {
        console.log(e);
        layer.msg('this is image');
    }

</script>
</html>